<template>
  <div class='order-detail-page'>
    <div class="order-state">
      <div class="order-state-left">
        <div class="order-state-font">{{orderState===10?'待付款':orderState===20?'待发货':orderState===30?'待收货':orderState===40?'交易成功':'交易取消'}}</div>
        <div class="order-id">订单编号:{{orderId}}</div>
      </div>
      <div v-if="orderState===10" src="../../assets/daifukuan.png" class="order-state-image"/>
      <div v-if="orderState===20" src="../../assets/daifahuo.png" class="order-state-image"/>
      <div v-if="orderState===30" src="../../assets/daifahuo.png" class="order-state-image"/>
      <div v-if="orderState===40" src="../../assets/jiaoyichenggong.png" class="order-state-image"/>
      <div v-if="orderState===0" src="../../assets/yiquxiao.png" class="order-state-image"/>
    </div>
    <div class="order-address">
      <img class="address-image" src="../../assets/address1.png"/>
      <div class="address-font" style="width:14.93rem">
        <div class="customer-info">
          <span class="customer-name">{{name}}</span>
          <span class="customer-phone">{{phone}}</span>
        </div>
        <div class="customer-address">
          {{address}}
        </div>
      </div>
    </div>
    <img class="border-bottom-image" src="../../assets/back.png"/>
    <div class="order-info" v-for="(item,index) in orderInfo" :key="index">
      <div class="merchant-info">
        <div class="merchant-info-left">
          <img class="merchant-image" src="../../assets/xian-img.png"/>
          <div class="merchant-font">{{item.shopName}}</div>
        </div>
      </div>
      <div v-for="(item,index) in item.productList" :key="index">
        <router-link :to="'/goods/detail?id=' + item.productId" class="goods-info">
          <img class="goods-item-image" :src="item.picUrl"/>
          <div class="goods-item-info">
            <div class="goods-name">{{item.productName}}</div>
            <div class="goods-norms" v-if="item.propertiesName !== null && item.propertiesName.length !== 0 && item.propertiesName !== ''">{{item.propertiesName}}</div>
            <div style="height: 1.17rem" v-if="!(item.propertiesName !== null && item.propertiesName.length !== 0 && item.propertiesName !== '')"></div>
            <div style="height: 1.01rem;"></div>
            <div class="goods-info-bottom">
              <div class="goods-info-left">
                <div class="goods-real-fee">
                  <div class="icon">￥</div>
                  {{item.productPrice}}
                </div>
              </div>
              <div class="goods-info-right">
                x{{item.buyProductNumber}}
              </div>
            </div>
          </div>
        </router-link>
        <div class="order-item-bottom" v-if="orderState === 40 || orderState === 20">
          <div class="order-item-bottom-left">
          </div>
          <div class="order-item-bottom-right">
            <span v-if="orderState === 40" class="color-gray">退换/售后</span>
            <span v-if="orderState === 20" class="color-orange">申请退款</span>
          </div>
        </div>
      </div>
      <div class="order-item-bottom order-item-bottom-right" v-if="orderState === 30 || orderState === 40">
        <div v-if="orderState === 30 || orderState === 40" class="color-orange" data-shipChannel="item.shipChannel" data-shipSn="item.shipSn" @click="gotoWuliu(item)">查询物流</div>
      </div>
    </div>
    <div class="order-info-item">
      <div class="item-title">配送方式</div>
      <div class="item-info">{{deliveryType==='0'?'包邮':'快递配送'}}</div>
    </div>
    <div class="order-info-item">
      <div class="item-title">商品金额</div>
      <div class="item-info">￥{{goodsFee}}</div>
    </div>
    <div class="order-info-item">
      <div class="item-title">运费</div>
      <div class="item-info">￥{{deliveryFee}}</div>
    </div>
    <div class="order-info-item">
      <div class="item-title">商品实付款</div>
      <div class="item-info">￥{{orderRealFee}}</div>
    </div>
    <div class="order-info-item">
      <div class="item-title">下单时间</div>
      <div class="item-info">{{orderTime}}</div>
    </div>
  </div>
</template>
<script>
import { API } from '../../config'
export default{
  data(){
    return {
      orderId: '',
      orderState: '', // -1 全部订单 10 待支付  20 待发货  30 待收货  40 交易完成 0 已取消
      name: '',
      phone: '',
      address: '',
      orderInfo: [],
      deliveryType: '1', // 0 包邮 1 快递
      goodsFee: '',
      deliveryFee: '',
      orderRealFee: '',
      orderTime: ''
    }
  },
  methods:{
    gotoWuliu (item) {
      // 跳转路由页面
      this.$router.push({
        path: '/order/expressInfo?shipChannel=' + item.shipchannel + '&shipSn=' + item.shipsn
      })
    },
    initFun(options) {
     let vm = this
     let accesstoken = this.getLocalStorage('accesstoken')
     vm.$axios.get( API + '/order/orderDetail?orderId=' + vm.orderId,{
          headers: {'accesstoken': accesstoken}//设置header信息
        }).then((res)=>{
       if (res.data.code === 200) {
        // todo 将订单详情赋值
        vm.address = res.data.data.address
        vm.name = res.data.data.consignee
        vm.phone = res.data.data.mobile
        vm.orderRealFee = res.data.data.orderPrice
        vm.orderInfo = res.data.data.orderProductList
        vm.goodsFee = res.data.data.productPrice
        vm.deliveryFee = res.data.data.totalFreight
        vm.orderTime = res.data.data.orderTime
        vm.orderState = res.data.data.orderStatus
      }
     })
    }
  },
  created() {
    let options = this.$route.query
    this.orderId = options.id
  },
  mounted() {
    this.initFun()
  }
}
</script>

<style lang='less' scoped>
@import '../../css/common.less';
@import '../../css/order/orderDetail.less';
</style>
